<template>
  <Layout>
    <Form ref="form1" :model="form1" :label-width="120">
      <Row class="query-form" style="padding-top: 15px">
        <Col span="8">
          <FormItem label="所在单位：">
            <!--            <cascaderDom ref="childOrg" @setOrgInfo="setOrgId" @setOrgname="setOrgName"-->
            <!--                         :orgTree="true"></cascaderDom>-->
            <company-select root v-model="form1.expertOrgName" class="query-form-el"></company-select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="二级集团：" prop="order">
            <two-level-org org-code class="query-form-el" v-model="form1.twoLevelOrgId"></two-level-org>
          </FormItem>
        </Col>
        <Col span="8" v-if="switchFlag">
          <FormItem label="审计计划：">
            <Select v-model="form1.planId" class="query-form-el">
              <Option v-for="plan in planList" :key="plan.auditPlanId" :value="plan.auditPlanId">
                {{ plan.auditPlanName }}
              </Option>
            </Select>
          </FormItem>
        </Col>

        <Col span="8" v-if="!switchFlag">
          <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>
      <Row class="query-form" v-show="switchFlag">
        <Col span="8">
          <FormItem label="姓名：">
            <Input class="query-form-el" type="text" v-model="form1.userName"></Input>
          </FormItem>
        </Col>
        <Col span="8" :offset="16">
          <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
          <Button @click="reset" class="ivu-btn-reset">重置</Button>
          <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
        </Col>
      </Row>
      <Row class="query-form">
        <Col span="24">
          <Button type="primary" class="ivu-btn-add" :loading="buttonLoading1" icon="md-cloud-download"
                  @click="download" >导出
          </Button>
        </Col>
      </Row>
    </Form>

    <Table ref='table' :height="tableHeight" :loading="buttonLoading" no-data-text="没有查询到相关数据！"
           @on-selection-change='getSelectRows'
           border :columns="columns1" :data="dataTable" size="small">
    </Table>


    <Row style="margin-right:10px;">
      <Col span="24">
        <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange"
              @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer
              show-elevator/>
      </Col>
    </Row>

  </layout>
</template>

<script>
import {Api} from '@/api/index.js'
import {sessionStorage} from '@/common/cacheUtils.js';


var cascaderDom = () => import('@/components/cascader-dom.vue');

export default {
  components: {cascaderDom},
  data() {
    return {
      planList: [],
      dataTable: [],
      switchFlag: false,
      form1: {},
      buttonLoading1: false,
      //分页参数
      pageSizeArray: [10, 20, 50],
      pagedata: {
        total: 0,
        pageSize: 10,
        currentPage: 1,
      },
      currentUser: JSON.parse(sessionStorage('userId').get('userId')),
      columns1: [
        {
          title: "序号",
          width: 80,
          align: "center",
          fixed: 'left',
          render: (h, params) => {
            return h('span', params.index + (this.pagedata.currentPage - 1) * this.pagedata.pageSize + 1);
          }
        },
        {
          minWidth: 100,
          title: '专家姓名',
          key: 'userName',
          align: 'center',
        },
        {
          minWidth: 100,
          title: '员工编号',
          key: 'loginId',
          align: 'center',
        },
        {
          minWidth: 150,
          title: '所在单位',
          key: 'companyName',
          align: 'center'
        },
        {
          minWidth: 120,
          title: '专业积分',
          key: 'credits',
          align: 'center'
        },
        {
          minWidth: 120,
          title: '参加审计次数',
          key: 'counts',
          align: 'center'
        },
        {
          minWidth: 120,
          title: '担任组长次数',
          key: 'groupCount',
          align: 'center'
        },
        {
          minWidth: 150,
          title: '专业特长',
          key: 'professionDesc',
          align: 'center'
        },
        {
          minWidth: 150,
          title: '联系方式',
          key: 'mobileNumber',
          align: 'center'
        },
      ],
      formnew: {
        credits: 1
      },
      buttonLoading: false,
      tableHeight: 10,
      deleteRows: [],
    }
  },
  mounted: function () {
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 145;
    this.getPlanAll();
    this.query();

  },
  methods: {
    download(){
      this.buttonLoading1 = true
      this.$http.get(Api.adtExpertDownload, {
        params:this.form1,
        responseType: 'blob'      //告诉服务器我们需要的响应格式
      }).then((res) => {
        const aLink = document.createElement("a");
        let blob = new Blob([res.data], {
          type: res.bodyBlob.type      //将会被放入到blob中的数组内容的MIME类型
        });
        aLink.href = URL.createObjectURL(blob)
        aLink.download = "审计专家统计(" + this.formatDate(new Date(), "yyyy-MM-dd") + ").xlsx" //标题
        aLink.click()
        document.body.appendChild(aLink)
        this.buttonLoading1 = false
      })
    },
    selectPlan(value, selectedData){
      if (value.length != 0){
        if (value[0]){
          this.form1.planId = value[0];
        }
        if (value[1]){
          this.form1.year = value[1];
        }else{
          delete this.form1.year;
        }
      }else{
        delete this.form1.planId;
        delete this.form1.year;
      }

    },
    getPlanAll(){
      let _this = this;
      this.$http.get(Api.getPlanAll).then((res) => {

        _this.planList = res.data.data.list
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },
    onSortChange({column,key,order}){
      this.form1.key = key;
      this.form1.order = order;
      if (order == 'normal'){
        this.form1.key = null;
      }
      this.query();
    },
    getSelectModelData(row) {
      this.formnew.userId = row.userId;
      this.formnew.userName = row.userName;
      this.model4 = false;
    },

    changeSelect(val) {
      this.form1datacopy.dutyStatusId = val.value
      this.form1datacopy.dutyStatus = val.label
    },
    switchQuery(flag) {
      this.switchFlag = flag;
      if (!this.switchFlag) {
        this.tableHeight = window.innerHeight - 220;
      } else {
        this.tableHeight = window.innerHeight - 315;
      }
    },

    setQueryUserName(data) {
      this.form1.reportUserName = data;
    },
    setQueryUserId(data) {
      this.form1.reportUserId = data[data.length - 1];
    },
    setQueryOrgId(data) {
      this.form1.orgId = data[data.length - 1];
    },
    dateFormat(time) {
      var date = new Date(time);
      var year = date.getFullYear();

      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return year + "-" + month + "-" + day;
    },
    setQueryOrgName(data) {
      this.form1.operateOrg = data;
    },
    setUserName(data) {
      this.form1datacopy.reportUserName = data;
    },
    setUserId(data) {
      this.form1datacopy.contactorId = data[data.length - 1];
    },
    setOrgId(data) {
      this.form1.expertOrgId = data[data.length - 1];
    },
    setOrgName(data) {
      this.form1.expertOrgName = data;
    },
    pageChange(pageNum) {
      this.pagedata.currentPage = pageNum;
      this.query();
    },
    pageSizeChange(pageSize) {
      this.pagedata.pageSize = pageSize;
      this.query();
    },

    copyArray(arr) {
      return JSON.parse(JSON.stringify(arr));
    },

    showData(data, flag) {
      this.currentOrgId = data.row.belongOrgId;
      this.currentOrgName = data.row.belongOrgName;
      this.setCurrentName = {value: data.row.contactorId, label: data.row.contactorName};

      if (flag == 1) {
        //查看页面
        this.showdata = data.row;
        this.showdata.setupDate = this.formatDate(new Date(this.showdata.setupDate), 'yyyy-MM-dd');
        this.model2 = true;
      } else {
        //修改页面
        this.form1datacopy = data.row;
        this.addMode = false
        this.model3 = true;
      }
    },

    getSelectRows(rows) {
      this.deleteRows = rows;
    },
    query() {
      this.buttonLoading = true
      let data = {
        startPage: this.pagedata.currentPage,
        size: this.pagedata.pageSize
      }

      Object.assign(data, JSON.parse(JSON.stringify(this.form1)));
      let url = Api.adtExpertStatisticsList;
      this.$http.get(url, {params: data}).then((res) => {
        this.dataTable = res.data.data.data;
        this.pagedata.total = res.data.data.totalSize;
        this.buttonLoading = false
      }).catch(e => {
        this.$Message.error("数据获取失败")
      })
    },
    reset() {
      this.form1 = {}

      this.query();

    },
    handleCancel() {
      this.form1datacopy = {};
      this.model1 = false;
    },
    handleCancel3() {
      this.form1datacopy = {};
      this.model3 = false;
    },

    onCancel() {
      this.model2 = false
    },

    formatDate(date, fmt) {
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
      }
      let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
      };
      for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : this.padLeftZero(str));
        }
      }
      return fmt;
    },
    padLeftZero(str) {
      return ('00' + str).substr(str.length);
    },
  },
  watch: {


  },
}
</script>
<style scoped>
@import '../../../../index.css';
</style>
